<template>
  <div class="boxHead">
    <div class="head">
      <el-button
        :class="{ menuBut: butTab != item.path, butIco: butTab == item.path }"
        v-for="item in menuList"
        @click="handleRouter(item.path)"
        >{{ item.name }}</el-button
      >
    </div>
    <div class="sign"></div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, watch } from "vue";

const router = useRouter();
const route = useRoute();

let butTab = ref("/");

// 路由数据
const menuList = [
  {
    path: "/",
    name: "搜索框",
  },
  {
    path: "/about",
    name: "级联动画(王者荣耀装备例子)",
  },
  {
    path: "/images",
    name: "上传图片",
  },
  {
    path: "/mars3D",
    name: "3D",
  },
];

// 路由跳转
const handleRouter = (val) => {
  router.push(val);
  butTab.value = val;
};

// 样式保持切换
watch(
  () => route.path,
  (newValue, oldValue) => {
    butTab.value = newValue;
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.boxHead {
  width: 98vw;
  height: 50px;
  // display: flex;
  // justify-content: center;
  .head {
    width: 97vw;
    height: 50px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #004e8645;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    z-index: 999;
    @include flex(row, flex-start, center);
    .menuBut {
      margin-left: 20px;
      color: #fff;
      border: 2px solid #012d4c;
      background-color: #012d4c;
      box-shadow: 2px 2px 2px 2px #00132c inset;
      &:hover {
        color: #0f3595;
        background-color: #d9faff;
        box-shadow: 0px 0px 2px 2px #00132c inset;
      }
    }
    .butIco {
      margin-left: 20px;
      color: #ffffff;
      border: 2px solid #012d4c;
      background-color: #c54b8a;
      box-shadow: 0px 0px 2px 2px #771363 inset;
      &:hover {
        color: #a6184e;
        background-color: #d9faff;
        box-shadow: 0px 0px 2px 2px #a6184e inset;
      }
    }
  }
}
</style>
